// 图标容器
.icon_box {
  font-size: 0;
}
.flex {
  display: flex;
}

// 监控回放组件根容器
#monitoring_replay_container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

// 屏幕容器
#screen_container {
  flex-grow: 1;
  width: 100%;
  height: 380px;
  border: black 1px solid;
}

.screen_box {
  width: 100%;
  height: 100%;
  border: black 1px solid;
}

// 设备列表
.device_ul {
  padding-left: 2px;
}
.device_li {
  width: 90%;
  list-style: none;
  border-bottom: 1px solid black;
  cursor: pointer;
}
.highLight {
  color: blue;
}

// 回放视频列表
.replay_list_box {
  display: flex;
  justify-content: space-around;
}
.replay_list_item {
  width: 150px;
  height: 90px;
  margin: 2px 4px;
  border: 1px solid black;
}

// 视频顶部按钮容器
.screen_top_btn_hot {
  width: 100%;
  height: 24px;
}
.screen_top_btn_hot:hover > .screen_top_btn_box {
  display: block;
}
.screen_top_btn_box {
  display: none;
  width: 100%;
  height: 24px;
  color: #fff;
  line-height: 24px;
  text-align: right;
  background-color: rgba(88, 88, 88, 0.6);
}

// 视频控件
#controller_container {
  display: flex;
  background-color: rgba(180, 180, 180, 0.5);
  border-bottom: 1px dashed gray;
}

// 是否全局控制
.all_btn {
  width: 26px;
  height: 20px;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  background-color: rgb(48, 48, 48);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

// 是否全局控制高亮
.is_contrall_all {
  background-color: rgb(0, 100, 255);
}

// 倍速组件容器
.speed_control_box {
  width: 100%;
}

// 倍速按钮刻度容器
.speed_a_list_box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 16px;
}

// 倍速按钮刻度
.speed_a_list {
  width: 10px;
  height: 6px;
  border: 1px solid rgb(128, 128, 128);
}

// 当前倍速高亮
.bgc_light {
  background-color: rgb(0, 130, 255);
}

// 当前视频倍速
.speed_text {
  width: 100%;
  height: 14px;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  cursor: default;
}

// 声音控制组件容器
.voice_control_box {
  display: flex;
  align-items: center;
}

// 声音控制条
.voice_range {
  width: 80%;
  height: 20px;
  line-height: 20px;
}

// 扩展功能按钮
.extra_control_btn {
  margin: 0 2px;
}

// 时间刻度条容器
.time_scale_bar {
  position: relative;
  background-color: #fff;
}

// 刻度条canvas
.time_scale {
  margin: 0;
  padding: 0;
  font-size: 0;
}
.time_scale_canvas {
  width: 100%;
  height: 50px;
}

// 回到当前刻度
.back_to_now {
  position: absolute;
  top: 2px;
  left: 20px;
}
.displayNone {
  display: none;
}

// 图标转svg
.active-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.warnfill-svg {
  content: url('');
}

.upload-svg {
  content: url('');
}

.unlock-svg {
  content: url('');
}

.triangledownfill-svg {
  content: url('');
}

.tag-svg {
  content: url('');
}

.synchronize-svg {
  content: url('');
}

.pause-svg {
  content: url('');
}

.roundleftfill-svg {
  content: url('');
}

.rewind-svg {
  content: url('');
}

.return-svg {
  content: url('');
}

.retain-svg {
  content: url('');
}

.refresh-svg {
  content: url('');
}

.recordfill-svg {
  content: url('');
}

.pullup-svg {
  content: url('');
}

.pulldown-svg {
  content: url('');
}

.playfill-svg {
  content: url('');
}

.play_forward_fill-svg {
  content: url('');
}

.piclight.svg {
  content: url('');
}

.picfill-svg {
  content: url('');
}

.notificationforbidfill-svg {
  content: url('');
}

.notificationfill-svg {
  content: url('');
}

.lock-svg {
  content: url('');
}

.full_screen-svg {
  content: url('');
}

.fast_forward-svg {
  content: url('');
}

.fast_back-svg {
  content: url('');
}

.close_light-svg {
  content: url('');
}

.check-svg {
  content: url('');
}

.cameraadd-svg {
  content: url('');
}

.back_forward_fill-svg {
  content: url('');
}

.back-svg {
  content: url('');
}
